import { Row, Col, Button, Result } from 'antd';
import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import styles from './styles.less';
import moment from 'moment';
import router from 'umi/router';

// 这里应该使用 antd 的 404 result 组件，
// 但是还没发布，先来个简单的。

@connect(({ buy }: any) => ({ ...buy.view }))
class Details extends React.Component<any, any> {
  render() {
    const {
      id,
      creatorName,
      type,
      typeName,
      staffId,
      staffName,
      staffPhoneNum,
      wineId,
      wineName,
      companyPrice,
      companySalePrice,
      staffPrice,
      freight,
      dealTime,
      freightComments,
      wareHouseCode,
      quantity,
      quantityComments,
      comments,
      otherFee,
      otherFeeComments,
      companyProfit,
      staffProfit,
      orderStatus,
    } = this.props;
    return (
      // <PageHeaderWrapper title={'订单详情'}>
      <div className={styles.detail}>
        <Row style={{ padding: '8px 0', fontSize: '16px', fontWeight: 'bold' }}>
          <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
            订单创建人：
          </Col>
          <Col offset={1} span={10}>
            {creatorName}
          </Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
            订单号：
          </Col>
          <Col offset={1} span={10}>
            {id}
          </Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
            人员：
          </Col>
          <Col offset={1} span={10}>
            {staffName}
            {staffPhoneNum ? `(${staffPhoneNum})` : null}
          </Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>商品名：</div>
          </Col>
          <Col offset={1} span={10}>
            {wineName}
          </Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>仓库：</div>
          </Col>
          <Col offset={1} span={10}>
            {wareHouseCode ? wareHouseCode : '无'}
          </Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>公司核定买入价：</div>
          </Col>
          <Col offset={1} span={10}>
            {companyPrice}
          </Col>
        </Row>
        {type === 0 ? (
          <Row style={{ padding: '8px 0', fontSize: '16px' }}>
            <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
              <div>员工买入单价：</div>
            </Col>
            <Col offset={1} span={10}>
              {staffPrice}
            </Col>
          </Row>
        ) : null}
        {type === 1 ? (
          <Row style={{ padding: '8px 0', fontSize: '16px' }}>
            <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
              <div>公司核定销售价：</div>
            </Col>
            <Col offset={1} span={10}>
              {companySalePrice}
            </Col>
          </Row>
        ) : null}
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>数量：</div>
          </Col>
          <Col offset={1} span={10}>
            {quantity}&nbsp;{quantityComments}
          </Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>运费：</div>
          </Col>
          <Col offset={1} span={10}>
            {freight}
          </Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>其它费用：</div>
          </Col>
          <Col offset={1} span={10}>
            {otherFee ? otherFee : '(无)'}
          </Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>其它费用备注：</div>
          </Col>
          <Col offset={1} span={10}>
            {otherFeeComments ? otherFeeComments : '(无)'}
          </Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>成交时间：</div>
          </Col>
          <Col offset={1} span={10}>
            {moment(dealTime).format('YYYY-MM-DD HH:mm:ss')}
          </Col>
        </Row>
        {/* <Row style={{ padding: '8px 0', fontSize: '16px' }}>
            <Col offset={1} span={10} span={10} style={{ textAlign: 'right', minWidth: '120px' }}>
              <div>利润分成比：</div>
            </Col>
            <Col>{companyProfitProportion}</Col>
          </Row> */}
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>员工利润：</div>
          </Col>
          <Col offset={1} span={10}>
            {staffProfit}
          </Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>公司利润：</div>
          </Col>
          <Col offset={1} span={10}>
            {companyProfit}
          </Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px', color: '#1890FF' }}>
          <Col span={8} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>订单状态：</div>
          </Col>
          <Col offset={1} span={10}>
            {orderStatus}
          </Col>
        </Row>
      </div>
      // </PageHeaderWrapper>
    );
  }
}
export default Details;
